<template>
	<view>
		<image class="float-icon" src="/static/fenlei-2(1).png" @tap="changtosearch()"></image>
		<OptionSearch
			v-if='search' 
			:condition='condition'
			:fumultiArray="multiArray"
			:fumultiIndex="multiIndex"
			:fufirst="first"
			@handlesearch='changtosearch()'
			@handleflash='flash'></OptionSearch>
		<swiper v-if='list.length!=0' class="card-swiper" :indicator-dots="false" :circular="true"
		 :autoplay="false">
			<swiper-item class="swiper-item-box" v-for="(item,index) in list" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<RecommendItem :list='item'   @tap='nav(item)'></RecommendItem>
				</view>
			</swiper-item>
		</swiper>
		<view style="padding: 10px;text-align: center;" v-else>
			<image style="margin-top: 30vh;" src="/static/image/meiyou.png"></image>
		</view>
	</view>
	
</template>

<script>
	const db=wx.cloud.database()
	const _ = db.command
	
	export default {
		data() {
			return {
				list:[],
				search:false,
				multiIndex: [0, 0],
				multiArray: [
					['2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000+'],
					['3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000+']
				],
				first:true,
				condition:{
					min:0,
					max:Number.MAX_VALUE,
					yongtu:[
						'家用娱乐',
						'游戏竞技',
						'编程设计',
						'渲染剪辑',
						'深度学习',
						'个人服务器'
					]
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				console.log(this.condition)
				db.collection("recommend").where({
					fenlei:_.in(this.condition.yongtu),
					price:_.and(_.gte(this.condition.min),_.lte(this.condition.max)),
				}).get().then(res=>{
					console.log("获取推荐列表：",res.data)
					this.list=res.data
				})
			},
			nav(item){
				uni.navigateTo({
					url:'./details/details?data='+JSON.stringify(item) 
				})
			},
			changtosearch(){
				this.search=!this.search
			},
			flash(condition,multiArray,multiIndex,first){
				this.multiArray=multiArray
				this.multiIndex=multiIndex
				this.first=first
				this.condition=condition
				this.getList()
			}
		}
	}
</script>

<style>
	.float-icon{
		width: 40px;
		height: 40px;
		background-color: #1296db;
		border-radius: 100%;
		position: fixed;
		right: 10vw;
		top:2vh;
		z-index: 100;
	}
	.card-swiper{
		height: 100vh !important;
		
	}
	.swiper-item-box{
		padding: 0px !important;
	}
	.swiper-item{
		background-color: white;
	}

</style>
